<template>
  <div class="container">
    <div class="list">
      <list-table-new
        @changeInput="changeInput"
        v-bind="tableSetting"
        ref="tableParam"
      ></list-table-new>
    </div>
    <dialogPublic
      width="600px"
      title="状态变更"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <editForm
        class="form"
        :formConfig="basicConfig"
        ref="basicForm"
        :formData="basicFormData"
      ></editForm>
    </dialogPublic>
    <dialogPublic
      width="600px"
      title="变更历史"
      :show.sync="historyShow"
      v-if="historyShow"
      :noFootBtn="true"
      fullscreen
    >
      <list-table-new v-bind="tableConfig" ref="table"></list-table-new>
    </dialogPublic>
  </div>
</template>

<script>
import {
  changeStatus,
  queryChangeList,
  queryStatusList,
} from "@/api/operationManagement/dispatchManagement.js";
export default {
  data() {
    return {
      search: {},
      searchSort: [],
      equipmentId: "",
      historyShow: false, // 变更历史弹框显示
      show: false, // 状态变更弹框显示
      // 状态录入列表信息
      tableSetting: {
        showFilterBtn: false,
        showCustomBtn: false,
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
            this.search = params;
            this.searchSort = sortStr;
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "select",
              label: "主要设备类型",
              model: "equipmentType",
              option: this.$store.getters["dirtData"]("dispatch_type"),
            },
            {
              type: "organization",
              label: "设备管理单位",
              model: "deptManageName",
              idsStr: "deptManage",
              placeholder: "请选择或输入",
            },
            {
              type: "majorEquipment",
              label: "设备名称",
              model: "equipmentName",
              idsStr: "equipmentId",
              placeholder: "请选择或输入",
            },
            {
              type: "select",
              label: "当前状态",
              model: "afterStatus",
              option: this.$store.getters["dirtData"]("dispatch_change_type"),
            },
            {
              type: "datetimerange",
              label: "变更时间",
              model: "changeTime",
            },
            {
              type: "userOnly",
              label: "变更人",
              model: "changeManName",
              idsStr: "changeMan",
              placeholder: "请选择或输入",
            },
          ],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {},
        },
        // 表头
        column: [
          {
            label: "主要设备类型",
            prop: "equipmentType",
            // sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("dispatch_type");
              let val = row.equipmentType;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "设备管理单位",
            prop: "deptManageName",
            sortable: true,
          },
          {
            label: "设备名称",
            prop: "equipmentName",
            sortable: true,
          },
          {
            label: "当前状态",
            prop: "afterStatus",
            // sortable: true,
            width: "100px",
            scopeType: "formate",
            method: (row) => {
              let types = this.$store.getters["dirtData"](
                "dispatch_change_type"
              );
              let val = row.afterStatus;
              let obj = types.find((i) => i.value == val);
              obj = obj ? obj.label : val;
              if (obj == "运行") {
                return `<span style="display: block; width: 80px; height: 30px; line-height: 30px; border-radius: 5px; text-align: center;  color: rgb(239, 84, 89)">运行</span>`;
              } else if (obj == "故障检修") {
                return `<span style="display: block; width: 80px; height: 30px; line-height: 30px; border-radius: 5px; text-align: center;  color: rgb(233, 171, 100)">故障检修</span>`;
              } else if (!obj) {
                return ``;
              } else {
                return `<span style="display: block; width: 80px; height: 30px; line-height: 30px; border-radius: 5px; text-align: center;  color: rgb(91, 187, 48)">${obj}</span>`;
              }
            },
          },
          {
            label: "变更时间",
            prop: "changeTime",
            // sortable: true,
          },
          {
            label: "变更人",
            prop: "changeManName",
            // sortable: true,
          },
          {
            label: "操作",
            type: "button",
            scopeType: "textButton",
            width: "240px",
            buttonArr: [
              {
                text: "状态变更",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  let types = this.$store.getters["dirtData"](
                    "dispatch_change_type"
                  );
                  // 主要设备类型  主变（TRAN）不剔除;线路（LINE）剔除大修; 机组（UNIT）剔除冷、热备用
                  if (row.equipmentType == "LINE") {
                    let objD = types.findIndex((i) => i.label == "大修");
                    if (objD != -1) {
                      types.splice(objD, 1);
                    }
                  } else if (row.equipmentType == "UNIT") {
                    let objH = types.findIndex((i) => i.label == "冷备用");
                    if (objH != -1) {
                      types.splice(objH, 1);
                    }
                    let objR = types.findIndex((i) => i.label == "热备用");
                    if (objR != -1) {
                      types.splice(objR, 1);
                    }
                  }
                  // 如有当前状态剔除
                  let obj = types.find((i) => i.value == row.afterStatus);
                  row.afterStatus = obj ? obj.label : row.afterStatus;
                  let deleteItem = types.findIndex(
                    (i) => i.label == row.afterStatus
                  );
                  if (deleteItem != -1) {
                    types.splice(deleteItem, 1);
                  }
                  this.basicConfig.itemArr[1].selectOption = types;
                  this.basicFormData = { ...row, changeTime: "" };
                  this.show = true;
                },
              },
              {
                text: "变更历史",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  this.equipmentId = row.equipmentId;
                  // let { changeTime, changeManName } = row;
                  // let data = { changeTime, changeManName };
                  // this.tableConfig.searchObj.queryData = data;
                  // this.tableConfig.searchObj.searchMethod(data);
                  this.tableConfig.searchObj.searchMethod();
                },
              },
            ],
          },
        ],
      },
      // 状态录入-历史变更-列表信息
      tableConfig: {
        showFilterBtn: false,
        showCustomBtn: false,
        // 搜索框
        searchObj: {
          searchMethod: (params) => {
            this.getChangeData(params);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "datetimerange",
              label: "变更时间",
              model: "changeTime",
            },
            {
              type: "userOnly",
              label: "变更人",
              model: "changeManName",
              placeholder: "请选择或输入",
            },
          ],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {},
        },
        // 表头
        column: [
          {
            label: "变更前状态",
            prop: "beforeStatus",
            required: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "dispatch_change_type"
              );
              let val = row.beforeStatus;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "变更后状态",
            prop: "afterStatus",
            required: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "dispatch_change_type"
              );
              let val = row.afterStatus;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "变更人",
            prop: "changeManName",
            required: true,
          },
          {
            label: "变更时间",
            prop: "changeTime",
            required: true,
          },
          {
            label: "变更原因",
            prop: "content",
            required: true,
          },
        ],
      },
      // 弹框表单
      basicConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "当前状态",
            prop: "afterStatus",
            type: "text",
            span: 24,
            disabled: true,
          },
          {
            label: "变更后状态",
            prop: "beforeStatus",
            type: "select",
            required: true,
            span: 24,
            selectOption: [],
          },
          {
            label: "变更时间",
            prop: "changeTime",
            type: "datetime",
            required: true,
            span: 24,
            methods: (item, res) => {
              let date = new Date(item); //新建日期对象
              let dateNow = new Date();
              if (date.getTime() > dateNow.getTime()) {
                this.$message.error("不能选择未来时间！");
                res = Object.assign({}, res, { changeTime: "" });
                this.basicFormData = Object.assign({}, res);
                return false;
              }
            },
          },
          {
            label: "变更原因",
            prop: "content",
            type: "textarea",
            span: 24,
            rows: 6,
            maxlength: 200,
            placeholder: "请输入",
          },
        ],
      },
      // 弹框数据
      basicFormData: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let equipmentType =
        this.$store.getters["dirtData"]("dispatch_type")[0].value;
      let data = {
        page: 1,
        pageSize: 15,
        equipmentType,
      };
      this.tableSetting.searchObj.queryData = data;
      this.tableSetting.searchObj.searchMethod(data);
    },
    // 弹框表单提交-变更信息
    async doSubmit() {
      let data = await this.$refs.basicForm.getFormData();
      let list = {
        content: data.content || "",
        changeTime: data.changeTime,
        equipmentId: data.equipmentId,
        status: data.beforeStatus,
      };
      await changeStatus(list).then((res) => {
        if (res.code == 200) {
          this.show = false;
          // this.$message.success(res.description);
          this.$message.success("保存成功！");
          this.tableSetting.searchObj.queryData = this.search;
          this.getTableData(this.search, this.searchSort);
        }
      });
    },
    // 查询状态录入列表信息
    async getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr) {
        queryData.orders = sortStr;
      }
      if (queryData.changeTime) {
        queryData.minChangeTime = queryData.changeTime[0];
        queryData.maxChangeTime = queryData.changeTime[1];
        delete queryData.changeTime;
      }
      let { data } = await queryStatusList(queryData);
      this.$set(this.tableSetting, "tableData", data.list || []);
      this.$set(this.tableSetting, "totalNumber", data.total || 0);
    },
    // 查询历史变更-列表信息
    async getChangeData(params) {
      let queryData = Object.assign({}, params, {
        equipmentId: this.equipmentId,
      });
      if (Array.isArray(queryData.changeTime)) {
        queryData.minChangeTime = queryData.changeTime[0];
        queryData.maxChangeTime = queryData.changeTime[1];
        delete queryData.changeTime;
      }
      let { data } = await queryChangeList(queryData);
      this.$set(this.tableConfig, "tableData", data.list || []);
      this.$set(this.tableConfig, "totalNumber", data.total || 0);
      this.historyShow = true;
    },
    //输入框改变
    changeInput(model, searchForm) {
      this.tableSetting.searchObj.queryData = searchForm;
      this.search = searchForm;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .action {
    margin: 10px 30px;
    text-align: right;
  }
  .el-button--primary {
    background-color: @kr-main-color;
    border-color: @kr-main-color;
  }
  .list {
    // margin: 20px;
    height: 95%;
  }
  .form {
    padding: 10px 50px 10px 50px;
  }
}
</style>